import React,{memo,useState} from 'react'
import './heighSearch.css'
import { Select } from 'antd';

import { DatePicker, Space } from 'antd';
import { connect } from 'react-redux';
const { RangePicker } = DatePicker;
const { Option } = Select;


const provinceData = ['请选择','安徽', '澳门', '北京', '福建', '甘肃', '广东', '广西', '贵州', '海南', '河北', '河南', '黑龙江', '湖北', '湖南', '吉林', '江苏', '江西', '辽宁', '内蒙古', '宁夏', '青海', '山东', '山西', '陕西', '上海', '四川', '台湾', '天津', '西藏', '香港', '新疆', '云南', '浙江', '重庆', '其他']

const cityData = {
  '请选择':['请选择'],
  '安徽': ['合肥', '安庆', '蚌埠', '亳州', '巢湖', '池州', '滁州', '阜阳', '淮北', '淮南', '黄山', '六安', '马鞍山', '宿州', '铜陵', '芜湖', '宣城'],
  '澳门': ['澳门'],
  '北京': ['昌平', '朝阳区', '崇文', '大兴', '东城', '房山', '丰台', '海淀', '怀柔', '门头沟', '密云', '平谷', '石景山', '顺义', '通州区', '西城', '宣武', '延庆'],
  '福建': ['福州', '龙岩', '南平', '宁德', '莆田', '泉州', '三明', '厦门', '漳州'],
  '甘肃': ['兰州', '白银', '定西', '甘南', '嘉峪关', '金昌', '酒泉', '临夏', '陇南', '平凉', '庆阳', '天水', '武威', '张掖'],
  '广东': ['广州', '潮州', '东莞', '佛山', '河源', '惠州', '江门', '揭阳', '茂名', '梅州', '清远', '汕头', '汕尾', '韶关', '深圳', '阳江', '云浮', '湛江', '肇庆', '中山', '珠海'],
  '广西': ['桂林', '百色', '北海', '崇左', '防城港', '贵港', '河池', '贺州', '来宾', '柳州', '南宁', '钦州', '梧州', '玉林'],
  '贵州': ['贵阳', '安顺', '毕节', '六盘水', '黔东南', '黔南', '黔西南', '铜仁', '遵义'],
  '海南': ['海口', '白沙', '保亭', '昌江', '澄迈', '儋州', '定安', '东方', '乐东', '临高', '陵水', '南沙群岛', '琼海', '琼中', '三亚', '屯昌', '万宁', '文昌', '五指山', '西沙群岛', '中沙群岛'],
  '河北': ['石家庄', '保定', '沧州', '承德', '邯郸', '衡水', '廊坊', '秦皇岛', '唐山', '邢台', '张家口'],
  '河南': ['郑州', '安阳', '鹤壁', '焦作', '济源', '开封', '洛阳', '漯河', '南阳', '平顶山', '濮阳', '三门峡', '商丘', '新乡', '信阳', '许昌', '周口', '驻马店'],
  '黑龙江': ['哈尔滨', '大庆', '大兴安岭', '鹤岗', '黑河', '鸡西', '佳木斯', '牡丹江', '七台河', '齐齐哈尔', '双鸭山', '绥化', '伊春'],
  '湖北': ['武汉', '鄂州', '恩施', '黄冈', '黄石', '荆门', '荆州', '潜江', '神农架', '十堰', '随州', '天门', '仙桃', '咸宁', '襄樊', '孝感', '宜昌'],
  '湖南': ['长沙', '常德', '郴州', '衡阳', '怀化', '娄底', '邵阳', '湘潭', '湘西', '益阳', '永州', '岳阳', '张家界', '株洲'],
  '吉林': ['长春', '白城', '白山', '吉林', '辽源', '四平', '松原', '通化', '延边'],
  '江苏': ['南京', '常州', '淮安', '连云港', '南通', '苏州', '宿迁', '泰州', '无锡', '徐州', '盐城', '扬州', '镇江'],
  '江西': ['南昌', '抚州', '赣州', '吉安', '景德镇', '九江', '萍乡', '上饶', '新余', '宜春', '鹰潭'],
  '辽宁': ['沈阳', '鞍山', '本溪', '朝阳市', '大连', '丹东', '抚顺', '阜新', '葫芦岛', '锦州', '辽阳', '盘锦', '铁岭', '营口'],
  '内蒙古': ['呼和浩特', '阿拉善', '巴彦淖尔', '包头', '赤峰', '鄂尔多斯', '呼伦贝尔', '通辽', '乌海', '乌兰察布', '锡林郭勒', '兴安'],
  '宁夏': ['银川', '固原', '石嘴山', '吴忠', '中卫'],
  '青海': ['西宁', '果洛', '海北', '海东', '海南', '海西', '黄南', '玉树'],
  '山东': ['济南', '滨州', '德州', '东营', '菏泽', '济宁', '莱芜', '聊城', '临沂', '青岛', '日照', '泰安', '威海', '潍坊', '烟台', '枣庄', '淄博'],
  '山西': ['太原', '长治', '大同', '晋城', '晋中', '临汾', '吕梁', '朔州', '忻州', '阳泉', '运城'],
  '陕西': ['西安', '安康', '宝鸡', '汉中', '商洛', '铜川', '渭南', '咸阳', '延安', '榆林'],
  '上海': ['宝山', '长宁', '崇明', '奉贤', '虹口', '黄浦', '嘉定', '金山', '静安', '卢湾', '闵行', '南汇', '浦东', '普陀', '青浦', '松江', '徐汇', '杨浦', '闸北'],
  '四川': ['成都', '阿坝', '巴中', '达州', '德阳', '甘孜', '广安', '广元', '乐山', '凉山', '泸州', '眉山', '绵阳', '内江', '南充', '攀枝花', '遂宁', '雅安', '宜宾', '资阳', '自贡'],
  '台湾': ['台北', '阿莲', '安定', '安平', '八德', '八里', '白河', '白沙市', '板桥', '褒忠', '宝山市', '卑南', '北斗', '北港', '北门', '北埔', '北投', '补子', '布袋', '草屯', '长宾', '长治市', '潮州市', '车城', '成功', '城中区', '池上', '春日', '刺桐', '高雄', '花莲', '基隆', '嘉义', '苗栗', '南投', '屏东', '台东', '台南', '台中', '桃园', '新竹', '宜兰', '彰化'],
  '天津': ['宝坻', '北辰', '大港', '东丽', '汉沽', '和平', '河北', '河东', '河西', '红桥', '蓟县', '津南', '静海', '南开', '宁河', '塘沽', '武清', '西青'],
  '西藏': ['拉萨', '阿里', '昌都', '林芝', '那曲', '日喀则', '山南'],
  '香港': ['北区', '大埔区', '东区', '观塘区', '黄大仙区', '九龙', '葵青区', '离岛区', '南区', '荃湾区', '沙田区', '深水?肚?', '屯门区', '湾仔区', '西贡区', '香港', '新界', '油尖旺区', '元朗区', '中西区'],
  '新疆': ['乌鲁木齐', '阿克苏', '阿拉尔', '阿勒泰', '巴音郭楞', '博尔塔拉', '昌吉', '哈密', '和田', '喀什', '克拉玛依', '克孜勒苏柯尔克孜', '石河子', '塔城', '图木舒克', '吐鲁番', '五家渠', '伊犁'],
  '云南': ['昆明', '保山', '楚雄', '大理', '德宏', '迪庆', '红河', '丽江', '临沧', '怒江', '曲靖', '思茅', '文山', '西双版纳', '玉溪', '昭通'],
  '浙江': ['杭州', '湖州', '嘉兴', '金华', '丽水', '宁波', '衢州', '绍兴', '台州', '温州', '舟山'],
  '重庆': ['巴南', '北碚', '璧山', '长寿', '城口', '大渡口', '大足', '垫江', '丰都', '奉节', '涪陵', '合川', '江北', '江津', '九龙坡', '开县', '梁平', '南岸', '南川', '彭水', '綦江', '黔江', '荣昌', '沙坪坝', '石柱', '双桥', '铜梁', '潼南', '万盛', '万州', '巫山', '巫溪', '武隆', '秀山', '永川', '酉阳', '渝北', '渝中', '云阳', '忠县'],
  '其他': ['阿根廷', '埃及', '爱尔兰', '奥地利', '奥克兰', '澳大利亚', '巴基斯坦', '巴西', '保加利亚', '比利时', '冰岛', '朝鲜', '丹麦', '德国', '俄罗斯', '法国', '菲律宾', '芬兰', '哥伦比亚', '韩国', '荷兰', '加拿大', '柬埔寨', '喀麦隆', '老挝', '卢森堡', '罗马尼亚', '马达加斯加', '马来西亚', '毛里求斯', '美国', '秘鲁', '缅甸', '墨西哥', '南非', '尼泊尔', '挪威', '葡萄牙', '其它地区', '日本', '瑞典', '瑞士', '斯里兰卡', '泰国', '土耳其', '委内瑞拉', '文莱', '乌克兰', '西班牙', '希腊', '新加坡', '新西兰', '匈牙利', '以色列', '意大利', '印度', '印度尼西亚', '英国', '越南', '智利']
};


const Index = memo((props)=> {

  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);

  const handleProvinceChange = (value) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = (value) => {
    setSecondCity(value);
    console.log(secondCity);
  };

  let obj={}
  const handleInput=(e)=>{
    console.log(e.target.value,e.target.name);
    obj[e.target.name]=e.target.value
    console.log(obj);
    console.log(secondCity);
  }
  
  const clearInput=()=>{
    let inputlist = document.getElementsByTagName("input");
    for (let i = 0; i < inputlist.length; i++) {
        if (inputlist[i].type === "text") {
          inputlist[i].value = "";
        }
    }
    let listselect = document.getElementsByTagName("select");
    for (let i = 0; i < listselect.length; i++) {
      listselect[i].value = "";
    }
    obj = {}
    console.log(obj);
  }

  return (
    //高级搜索
    <div style={{display:`${props.isShow}`==="true"?"none":"block"}}>
      <div id='heighSearch' >
      
      <div className='left'>
        <ul>
          <li><span>编号</span><span><input type="text" name="id" onChange={handleInput}/></span></li>
          <li><span>职位</span>
            <span>
              <select name="boss" onChange={handleInput}>
                <option value="0">请选择</option>
                <option value="老板">老板</option>
                <option value="董事长">董事长</option>
                <option value="总经理">总经理</option>
                <option value="负责人">负责人</option>
                <option value="业务员">业务员</option>
                <option value="技术员">技术员</option>
              </select>
            </span>
          </li>
          <li><span>网址</span><span><input type="text" name="netaddress" onChange={handleInput}/></span></li>
          <li><span>最后更新</span>
            <span>
              <Space direction="vertical" size={12}>
                <RangePicker />      
              </Space>      
            </span>
          </li>
          <li><span>详细地址</span><span><input type="text" name="address" onChange={handleInput}/></span></li>
          <li><span>客户来源</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="电话营销">电话营销</option>
                <option value="搜索引擎">搜索引擎</option>
                <option value="朋友介绍">朋友介绍</option>
                <option value="其他来源">其他来源</option>
              </select>
            </span>
          </li>
          <li><span>录入者</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="超级管理员">超级管理员</option>
              </select>
            </span>
          </li>
        </ul>
      </div>
      <div className='middle'>
        <ul>
          <li><span>客户名称</span><span><input type="text" /></span></li>
          <li><span>手机号码</span><span><input type="text" /></span></li>
          <li><span>所属行业</span>
            <span>
            <select className='industry'>
                <option value="0">请选择</option>
                <option value="农、林、牧、渔业">农、林、牧、渔业</option>
                <option value="采矿业">采矿业</option>
                <option value="制造业">制造业</option>
                <option value="电力、燃气及水的生产和供应业">电力、燃气及水的生产和供应业</option>
                <option value="建筑业">建筑业</option>
                <option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>
                <option value="信息传输、计算机服务和软件业">信息传输、计算机服务和软件业</option>
                <option value="批发和零售业">批发和零售业</option>
                <option value="住宿和餐饮业">住宿和餐饮业</option>
                <option value="金融业">金融业</option>
                <option value="房地产业">房地产业</option>
                <option value="租赁和商务服务业">租赁和商务服务业</option>
                <option value="科学研究、技术服务和地质勘查业">科学研究、技术服务和地质勘查业</option>
                <option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>
                <option value="居民服务和其他服务业">居民服务和其他服务业</option>
                <option value="教育">教育</option>
                <option value="卫生、社会保障和社会福利业">卫生、社会保障和社会福利业</option>
                <option value="文化、体育和娱乐业">文化、体育和娱乐业</option>
              </select>
            </span>
          </li>
          <li><span>所在地区</span>
            <span>
            <Select defaultValue={provinceData[0]} style={{width: 120,}} onChange={handleProvinceChange}>
              {provinceData.map((province) => (
               <Option key={province}>{province}</Option>
             ))}
            </Select>
            <Select style={{width: 120,}} value={secondCity} onChange={onSecondCityChange}>
              {cities.map((city) => (
                <Option key={city}>{city}</Option>
              ))}
            </Select>
            </span>
          </li>
          <li><span>邮编</span><span><input type="text" /></span></li>
          <li><span>客户类型</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="已成交">已成交</option>
                <option value="等待打款">等待打款</option>
                <option value="确定细节">确定细节</option>
                <option value="有意向">有意向</option>
                <option value="潜在客户">潜在客户</option>
              </select>
            </span>
          </li>
          <li><span>商品类型</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="产品大分类">产品大分类</option>
              </select>
              <select >
                <option value="0">请选择</option>
                <option value="子分类">子分类</option>
              </select>
            </span>
          </li>
        </ul>
      </div>
      <div className='right'>
        <ul>
          <li><span>联系人</span><span><input type="text" /></span></li>
          <li><span>电子邮箱</span><span><input type="text" /></span></li>
          <li><span>录入时间</span>
            <span>
              <Space direction="vertical" size={12}>
                <RangePicker />      
              </Space>      
            </span>
          </li>
          <li><span>QQ</span><span><input type="text" /></span></li>
          <li><span>客户级别</span>
            <span>
              <select >
                  <option value="0">请选择</option>
                  <option value="5">★★★★★</option>
                  <option value="4">★★★★</option>
                  <option value="3">★★★</option>
                  <option value="2">★★</option>
                  <option value="1">★</option>
              </select>
            </span>
          </li>
          <li><span>部门</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="总经办">总经办</option>
                <option value="业务部">业务部</option>
                <option value="业务一部">业务一部</option>
                <option value="业务二部">业务二部</option>
                <option value="招商渠道部">招商渠道部</option>
                <option value="营销部">营销部</option>
                <option value="采购部">采购部</option>
                <option value="客服部">客服部</option>
              </select>
            </span>
          </li>
          <li><span>业务员</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="超级管理员">超级管理员</option>
                <option value="张三">张三</option>
              </select>
            </span>
          </li>
        </ul>
      </div>
      </div>
      <div className="mybtnitem">
        <button >立即搜索</button>
        <button onClick={clearInput}>清空条件</button>
      </div>
    </div>
  )
})





// 状态映射  将reducer中的state映射成props，在组件中可以使用props.num获取值
const mapStateToProps = (state)=>{
  return {
    isShow:state.isShow.isShow
  }
}


// export default Connect(state的映射，dispatch的映射)(当前组件名称)Index
export default connect(mapStateToProps)(Index)
